<template>
	<view>
		<view class="VerticalBox" :style="[{top:CustomBar + 'px'}]">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				style="height: calc(100vh - 150rpx);">
				<view v-for="(item,index) in goodsList" :key="index">
					<view class="cu-item" :class="index==tabCur?'text-orange cur':''" @tap="TabSelect" :data-id="index"
						v-if="item.goodsList.length !=0">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height: calc(100vh - 150rpx);"
				:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="(item,index) in goodsList" :key="index" :id="'main-'+index">

					<view class="cu-bar solid-bottom bg-white" v-if="item.goodsList.length !=0">
						<view class="action" style="">
							<text class="cuIcon-title text-orange"></text> {{item.name}}
						</view>
					</view>
					<view class="cu-list menu-avatar " style="padding: 5px;">
						<view class="" v-for="food in item.goodsList" :key="food.goodsCode">
							<!--  -->
							<view class="cu-item goods-item list-goods-item">
								<view>
									<image :src="food.imgurl"
										style="width: 80px;height: 80px;margin-right: 10rpx;border-radius: 10rpx;">
									</image>
								</view>
								<view class="content">
									<view class="goods-name">{{food.name}}</view>
									<view class="grid col-2 ">
										<view class="text-left description">
											{{food.groupdetail}}
										</view>
									</view>
									<view class="goods-btm">
										<view style="color: #4169e1;font-size: 24rpx;">
											<text style="font-size: 26rpx;">
												￥<text>{{food.retailPrice}}</text>
											</text>

											<!-- 		<text v-if="food.memberPrice"
												style="color: #fb5868;font-size: 22rpx;margin-left: 15rpx;">
												会员￥{{getGoodsMemberPrice(food.memberPrice,food.retailPrice)}}起
											</text> -->
											<text v-if="food.goodShow"
												style="color: #fb5868;font-size: 22rpx;margin-left: 15rpx;">
												会员￥{{food.goodShow}}起
											</text>
										</view>
										<view class="goods-btns">
											<view v-if="food.count >0 " class="sub-btn" @click="subtract(food)">-
											</view>
											<view v-show="food.count >0 ">{{food.count}}</view>
											<view class="action-btn" @click="addGood(food)">+</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<van-overlay :show="showDetail" @click="showDetail=false">
			<view class="wrapper">
				<view class="detail-title">
					<text></text>
					<text>价格明细</text>
					<view class="detail-action">
						<text @click="clear">清空</text>
						<van-icon name="close" color="#999" size="40rpx" @click="showDetail=false" />
					</view>
				</view>
				<view style="margin-top: 20rpx;" v-for="item in orderParams.listGoodsInfo" :key="item.id">
					<view class="goods-item">
						<text style="color: #000;">{{item.name}}</text>
						<text><text style="color: #4169e1;">￥{{item.retailPrice}}</text> x{{item.count}}</text>
					</view>
					<view class="goods-item">
						{{item.groupdetail}}
					</view>
				</view>
			</view>
		</van-overlay>
		<view class="goods-cart">
			<!-- v-for="(item,index) in buyTicketRemind" :key='index' -->
			<view class="ticket-tips-info">
				<van-icon name="close" />
				<text>不支持退换</text>
			</view>
			<view class="order-price">
				<view class="" style="display: flex; align-items: center;">
					<view>合计：￥<text style="font-size: 36rpx;color: crimson;margin: 0 10rpx;">{{amount}}</text>元</view>
					<view class="order-detail" @click="showDetail=true">
						<text>明细</text>
						<van-icon name="arrow-up" />
					</view>
				</view>
				<van-button round type="info" @click="creatOrder" custom-style='width:250rpx;' color='#FB5868'>立即支付
				</van-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		goodsList,
		goodsOrder,
		memberGoodsList
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				totalPrice: 0,
				totalNum: 0,
				modalName: 0,
				goodsList: [],
				amount: 0,
				orderParams: {
					orderPhone: '',
					openId: '',
					listGoodsInfo: []
				},
				payParams: {
					orderNo: '',
					openId: '',
					orderPhone: '',
				},
				showDetail: false
			};
		},
		onShow() {
			if (this.orderParams.listGoodsInfo.length == 0) {
				this.goodsList.map(item => {

					item.goodsList.map(goods => {
						goods.count = 0
						goods.retailPrice = goods.sourcePrice
					})
				})
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});

			this.getMemberGoods()

		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			addGood(goods) {
				goods.count++;
				this.$store.commit('addGoodsList', goods)
			},
			subtract(goods) {
				goods.count--;
				this.$store.commit('subtractGoodsList', goods)
			},
			clear() {
				this.$store.commit('clearCart')
				this.goodsList.map(item => {
					item.goodsList.map(goods => {
						goods.count = 0
					})
				})
			},
			creatOrder() {

				if (this.orderParams.listGoodsInfo.length == 0) {
					uni.showToast({
						title: "请选择商品后再支付哦！",
						icon: "none"
					})
					return
				}

				uni.navigateTo({
					url: '../goodsOrderComfirm/goodsOrderComfirm'
				})

				// goodsOrder(this.orderParams).then(result => {
				// 	if (result.code == "SUCCESS") {
				// 		this.payParams.orderNo = result.data.orderNo
				// 		uni.navigateTo({
				// 			url: '../goodsOrderComfirm/goodsOrderComfirm?orderNo=' + result.data.orderNo
				// 		})
				// 	}
				// })
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.goodsList.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + i);
						view.fields({
							size: true
						}, data => {
							this.goodsList[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.goodsList[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.goodsList.length; i++) {
					if (scrollTop > this.goodsList[i].top && scrollTop < this.goodsList[i].bottom) {
						this.verticalNavTop = (i - 1) * 50
						this.tabCur = i
						return false
					}
				}
			},
			getGoodsList() {
				//获取商品列表
				goodsList().then(res => {
					console.log(this.memberList);
					this.memberList.map(memberItem => {
						if (memberItem.policyId) {
							const memberPrice = []
							const policyId = memberItem.policyId.split(',')
							const price = memberItem.memberPrice ? memberItem.memberPrice.split(',') : []
							const goodDiscount = memberItem.goodDiscount ? memberItem.goodDiscount.split(
								',') : []
							for (let i = 0; i < policyId.length; i++) {
								memberPrice.push({
									policyId: policyId[i],
									goodDiscount: goodDiscount[i],
									memberPrice: price[i]
								})
							}
							res.data.find(item => {
								if (item.goodsCode == memberItem.goodsCode) {
									item.memberPrice = memberPrice
									item.goodShow = memberItem.goodShow
								}
							})
						}
					})


					res.data.map(item => {
						item.goodsName = item.name
						item.serviceFee = '0.00'
						item.goodsCount = item.count
						item.count = 0
						item.sourcePrice = item.retailPrice
						const index = this.goodsList.findIndex(value => value.name == item.classifyName)
						if (index == -1) {
							this.goodsList.push({
								name: item.classifyName,
								goodsList: []
							})
						}

						if (item.goodsType == 3 || item.goodsType == 4) {
							if (index == -1) {
								this.goodsList[this.goodsList.length - 1].goodsList.push(item)
							} else {
								this.goodsList[index].goodsList.push(item)
							}
						} else {
							if (item.isNullSale != 0 || item.goodsCount != 0) {
								if (index == -1) {
									this.goodsList[this.goodsList.length - 1].goodsList.push(item)
								} else {
									this.goodsList[index].goodsList.push(item)
								}
							}
						}
					})
					this.memberList.map(memberItem => {
						if (memberItem.policyId) {
							const memberPrice = []
							const policyId = memberItem.policyId.split(',')
							const price = memberItem.memberPrice ? memberItem.memberPrice.split(',') : []
							const goodDiscount = memberItem.goodDiscount ? memberItem.goodDiscount.split(
								',') : []
							for (let i = 0; i < policyId.length; i++) {
								memberPrice.push({
									policyId: policyId[i],
									goodDiscount: goodDiscount[i],
									memberPrice: price[i]
								})
							}
							res.data.find(item => {
								if (item.goodsCode == memberItem.goodsCode) {
									item.memberPrice = memberPrice
								}
							})
						}

					})




				})
			},
			getMemberGoods() {
				memberGoodsList().then(res => {
					console.log(res);
					this.memberList = res.data
					this.getGoodsList()
				})
			}
		},
		computed: {
			getGoodsMemberPrice() {
				return (priceList, price) => {
					const lowestPrice = priceList[0]
					return lowestPrice.memberPrice ? lowestPrice.memberPrice : (price * lowestPrice.goodDiscount)
						.toFixed(2)
				}
			}
		},
		watch: {
			"$store.state.goodsList": {
				handler: function(list) {
					this.amount = 0
					this.orderParams.listGoodsInfo = list
					this.orderParams.listGoodsInfo.map(item => {
						item.retailPrice = item.sourcePrice
						this.amount += parseFloat((item.count * item.retailPrice).toFixed(2))
					})
					this.amount = this.amount.toFixed(2)
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*#ifdef H5 */
	.cu-bar.foot {
		bottom: 50px;
	}

	.bottom-modal {
		bottom: 100px;
	}

	/*#endif */
	/*#ifndef H5 */
	.bottom-modal {
		bottom: 50px;
	}

	/*#endif */

	.cu-modal {
		transition: auto;
	}

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 140upx;
		white-space: initial;
		font-size: 30rpx;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		height: 60px;
		position: relative;
		line-height: 60px;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 100%;
		position: absolute;
		background-color: #fb4557;
		top: 0;
		left: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
		height: calc(100vh - 120rpx);
	}

	.VerticalMain {
		background-color: #fff;
		flex: 1;
	}

	.cu-list.menu-avatar>.cu-item {
		position: relative;


	}

	.cu-list.menu-avatar>.cu-item .content {
		width: 100%;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cu-list.menu-avatar>.cu-item {
		height: 90px;
	}


	.goods-item {
		display: flex;

		padding: 5px 0 5rpx 0;

		.goods-name {
			font-weight: bold;
			font-size: 30rpx;
		}

		.goods-btns {

			display: flex;
			justify-content: flex-end;

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FB5868;
				color: #fff;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				line-height: 40rpx;
				margin: 0 20rpx;
			}

			.sub-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				border: 1px solid #999;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				line-height: 40rpx;
				margin: 0 20rpx;
			}
		}
	}

	.order-price {
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action {
		background-color: #f0f0f5;
		line-height: 35px;
		font-size: 34rpx;
		font-weight: bold;
		box-sizing: border-box;
		padding-left: 15rpx;
	}

	.description {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.goods-btm {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 10rpx;
		width: 100%;
	}

	.ticket-tips-info {
		font-size: 26rpx;
		color: #999;
	}

	.goods-cart {
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		width: 100vw;
		height: 150rpx;
		border-top: 1px solid #f0f0f5;
		background-color: #fff;
		z-index: 999;
	}

	.order-detail {
		margin-left: 30rpx;
		color: #999;

		text {
			margin-right: 5rpx;
		}
	}


	.wrapper {
		background-color: #fff;
		width: 100vw;
		max-height: 30vh;
		position: absolute;
		bottom: 150rpx;
		overflow: scroll;
		box-sizing: border-box;
		padding: 20rpx;

		.detail-title {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;

			.detail-action {
				display: flex;
				align-items: center;

				text {
					// margin-right: 40rpx;
					position: absolute;
					color: royalblue;
					right: 120rpx;
					margin-top: -5rpx;
				}
			}
		}

		.goods-item {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999;
			padding: 0 40rpx;
		}
	}

	.list-goods-item {
		border-bottom: 1px solid #f0f0f5;
	}
</style>